<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="头像" prop="avatar">
        <el-input v-if="false" v-model="form.avatar" />
        <div class="user-block">
          <img
            class="img-circle"
            :src="avatarImages[form.avatar] + avatarPrefix"
          >
        </div>
      </el-form-item>
      <el-form-item label="昵称" required prop="nickName">
        <el-input v-model="form.nickName" />
      </el-form-item>
      <el-form-item label="告白对象" required prop="lover">
        <el-input v-model="form.lover" />
      </el-form-item>
      <el-form-item label="告白内容" required prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          placeholder="请输入内容"
          maxlength="1024"
          :rows="5"
          show-word-limit
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">告白♥</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import {mapGetters} from 'vuex'
const Mock = require('mockjs')
// import UserCard from './components/UserCard'
// import Activity from './components/Activity'
const avatarPrefix = '?imageView2/1/w/80/h/80'
export default {
  data() {
    return {
      avatarImages: [
        require('@/assets/avatar/1.png'),
        require('@/assets/avatar/2.png'),
        require('@/assets/avatar/3.png'),
        require('@/assets/avatar/4.png'),
        require('@/assets/avatar/5.png'),
        require('@/assets/avatar/6.png'),
        require('@/assets/avatar/7.png')
      ],
      avatarPrefix,
      form: {
        avatar: Math.floor(Math.random() * 100 % 7),
        nickName: Mock.mock('@first'),
        lover: '',
        content: ''
      },
      rules: {
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        lover: [
          { required: true, message: '请输入告白对象', trigger: 'blur' },
          { min: 1, max: 1024, message: '长度在 1 到 1024 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入告白内容', trigger: 'blur' },
          { min: 1, max: 1024, message: '长度在 1 到 1024 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.user-block {
  .img-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    float: left;
  }
}

</style>
